<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
      <h1>整车全流程营运枢纽</h1>
    </div>
    <div class="data-container">
      <div class="data-left">
        <div class="data-left-item">
          <div class="title">整车订单生产情况</div>
          <div id="chart-vleft-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-left-item">
          <div class="title">整车订单销售情况</div>
          <div id="chart-vleft-2" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
      <div class="data-center">
        <div class="center-top-num">
          <div class="item">
            <div class="text">总销售额(万元)</div>
            <div class="num">{{ totalsalesnum }}</div>
          </div>
          <div class="item">
            <div class="text">总订单量(台)</div>
            <div class="num">{{ totalordernum }}</div>
          </div>
          <div class="data-foot-line"></div>
        </div>
        <div class="center-top">
          <el-carousel height="290px" type="card" :autoplay="true">
            <el-carousel-item>
              <div>
                <div class="title">接单台数</div>
                <div id="chart-vleft-3" style="height:200px;"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div>
                <div class="title">接单实销</div>
                <div id="chart-vleft-4" style="height:200px;"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div>
                <div class="title">整车订单销售情况</div>
                <div id="chart-vleft-5" style="height:200px;"></div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="title">实销数量（按月）</div>
        <div id="chart-vcenter" style="height:400px;" class="chart-vcenter"></div>
        <div class="data-foot-line"></div>
      </div>
      <div class="data-right">
        <div class="data-right-item">
          <div class="title">库龄分析</div>
          <div id="chart-vright-1" style="height: calc(100% - 15px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
          <div class="title">通路库存</div>
          <div id="chart-vright-2" style="height: calc(100% - 15px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
          <div class="title">应收款分析</div>
          <div id="chart-vright-3" style="height: calc(100% - 15px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
          <div class="title">回款分析</div>
          <div id="chart-vright-4" style="height: calc(100% - 15px)"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");
let $chartLeft1,
  $chartLeft2,
  $chartLeft3,
  $chartLeft4,
  $chartLeft5,
  $chartCenter,
  $chartRight1,
  $chartRight2,
  $chartRight3,
  $chartRight4,
  $serieList;
import {
  chartLeft1,
  chartLeft2,
  chartLeft3,
  chartRight2,
  serieList,
  pieChart1,
} from "./wholeVehicle";
import "./wholeVehicle.less";
import http from "@/api/http.js";
export default {
  components: {
  },
  data() {
    return {
      totalordernum: 0,
      totalsalesnum: 0,
      length: 0
    };
  },
  created() {
    console.log("chart");
  },
  methods: {
    // 进入直接加载程序
    // 加载总销售额及总订单量
    getTotal(month, year) {
      console.log("month:" + month);
      let url = "api/wholeVehicleScreen/getTotal?year=" + year;
      http.post(url, {}, true).then((s) => {
        s.totalSalesNumList.forEach((e) => {
          this.totalsalesnum = (e.totalsalesnum / 10000).toFixed(2);
        });
        s.totalOrderNumList.forEach((e) => {
          this.totalordernum = e.totalordernum;
        });
      });
    },
    getWholeVehicleProd(month, year) {
      console.log("month:" + month);
      let url = "api/wholeVehicleScreen/getWholeVehicleProd?month=" + month + "&year=" + year;
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapMonthData = new Array();
        // 线上名称
        var mapYearData = new Array();
        s.wholeVehicleMonthOrderList.forEach((e) => {
          mapMonthData.push(e.wholevehiclemonthorder);
        });
        s.wholeVehicleYearOrderList.forEach((e) => {
          mapYearData.push(e.wholevehicleyearorder);
        });
        s.wholeVehicleMonthProdList.forEach((e) => {
          mapMonthData.push(e.wholevehiclemonthprod);
        });
        s.wholeVehicleYearProdList.forEach((e) => {
          mapYearData.push(e.wholevehicleyearprod);
        });
        s.wholeVehicleProdMonthOfflineList.forEach((e) => {
          mapMonthData.push(e.wholevehicleprodmonthoffline);
        });
        s.wholeVehicleProdYearOffLIineList.forEach((e) => {
          mapYearData.push(e.wholevehicleprodyearoffliine);
        });
        mapMonthData.push(10);
        mapYearData.push(20);
        chartLeft1.series[0].data.push(...mapYearData);
        chartLeft1.series[1].data.push(...mapMonthData);

        $chartLeft1 = echarts.init(document.getElementById("chart-vleft-1")); //科目预算分类统计
        $chartLeft1.setOption(chartLeft1, true);

        $chartLeft5 = echarts.init(document.getElementById("chart-vleft-5")); //科目预算分类统计
        $chartLeft5.setOption(chartLeft1, true);
      });
    },
    getPie() {
      $chartLeft2 = echarts.init(document.getElementById("chart-vleft-2"));
      $chartLeft2.setOption(chartLeft2, true);
      // 饼图配色（自定义）
      const chartColorList = ["#5470c6", "#91cc75", "#ffdc60", "#ee6666", "#73c0de"];
      // 饼图测试数据
      let testData = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ];
      var option = {
        backgroundColor: "#000002",
        color: chartColorList, // 设置饼图全局配色
        series: serieList
      };
      console.log(option); // 可以打印出具体的option便于理解其结构
      let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 2000); // 设置自动切换高亮图形的定时器
      function highlightPie() { // 取消所有高亮并高亮当前图形
        for (let optIdx in option.series) {
          let opt = option.series[optIdx].data;
          if (opt.length < 2) // 外圈（只有一条数据）
            continue;
          // 遍历饼图数据，取消所有图形的高亮效果, 高亮当前图形
          for (let idx in opt)
            $chartLeft2.dispatchAction({
              type: idx != currentIndex ? 'downplay' : 'highlight',
              seriesIndex: optIdx,
              dataIndex: idx
            });
        }
      }
      $chartLeft2.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval);
        currentIndex = params.dataIndex;
        highlightPie();
      });
      $chartLeft2.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval)
          clearInterval(changePieInterval);
        changePieInterval = setInterval(selectPie, 1000);
      });
      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = testData.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
      }
    },
    getActualSalesData() {
      let url = "api/wholeVehicleScreen/getActualSalesData";
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapXData = new Array();
        // 线上名称
        var mapXNameData = new Array();
        s.lastYearSqlList.forEach((e) => {
          mapXNameData.push(e.dat);
        });
        s.lastYearSqlList.forEach((e) => {
          mapXData.push(e.numr);
        });
        $chartCenter = echarts.init(document.getElementById("chart-vcenter"));
        chartRight2.series[0].data.push(...mapXData);
        chartRight2.xAxis[0].data.push(...mapXNameData);
        $chartCenter.setOption(chartRight2, true);

        $chartLeft4 = echarts.init(document.getElementById("chart-vleft-4")); //科目预算分类统计
        $chartLeft4.setOption(chartRight2, true);
      });
    },
    getReceiveOrderData() {
      let url = "api/wholeVehicleScreen/getReceiveOrderData";
      http.post(url, {}, true).then((s) => {
        // 线上数据
        var mapXData = new Array();
        // 线上名称
        var mapXNameData = new Array();
        // 线上名称
        var mapLegendData = new Array();
        var mapXaxisData = new Array();
        s.lastYearSqlList.forEach((e) => {
          mapXaxisData.push(e.dat);
        });
        s.lastYearSqlList.forEach((e) => {
          mapXData.push(e.numl);
        });
        s.lastYearSqlList.forEach((e) => {
          mapLegendData.push(e.year);
        });
        s.newYearSqlList.forEach((e) => {
          mapXaxisData.push(e.dat);
        });
        s.newYearSqlList.forEach((e) => {
          mapXNameData.push(e.numl);
        });
        s.newYearSqlList.forEach((e) => {
          mapLegendData.push(e.year);
        });
        mapLegendData = Array.from(new Set(mapLegendData));
        mapXaxisData = Array.from(new Set(mapXaxisData));
        $chartLeft3 = echarts.init(document.getElementById("chart-vleft-3")); //科目预算分类统计
        chartLeft3.series[0].data.push(...mapXData);
        chartLeft3.series[1].data.push(...mapXNameData);
        chartLeft3.xAxis[0].data.push(...mapXaxisData);
        // chartLeft3.legend.data.push(...mapLegendData);
        $chartLeft3.setOption(chartLeft3, true);
      });
    }
  },
  mounted() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + month;
    // 加载总销售额及总订单量
    this.getTotal(currentdate, year);
    //整车订单生产情况
    this.getWholeVehicleProd(currentdate, year);
    // 动态饼图
    this.getPie();
    // 
    this.getActualSalesData();
    // 今、去年接单台数
    this.getReceiveOrderData();

    $chartRight1 = echarts.init(document.getElementById("chart-vright-1"));
    $chartRight1.setOption(pieChart1, true);

    $chartRight2 = echarts.init(document.getElementById("chart-vright-2"));
    $chartRight2.setOption(pieChart1, true);

    $chartRight3 = echarts.init(document.getElementById("chart-vright-3"));
    $chartRight3.setOption(pieChart1, true);

    $chartRight4 = echarts.init(document.getElementById("chart-vright-4"));
    $chartRight4.setOption(pieChart1, true);

  },
  destroyed() {
  },
};
</script>
<style scoped>
.right-3 {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item>div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}

.el-carousel__item h3 {
  /* color: #475669; */
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #1400a8;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #1400a8;
}
</style>